<template>
  <el-table :data="list" style="width: 100%">
    <el-table-column prop="title" :label="detail.title" min-width="180" />
    <el-table-column prop="desc" label="描述" min-width="180" />
    <el-table-column fixed="right" label="操作" width="80">
      <template #default="scope">
        <el-button
          link
          type="primary"
          @click="updateClick(scope.row.id, scope.row.title)"
          >配置</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <el-dialog
    v-model="updateVisible"
    :title="updateTitle"
    @close="close()"
    width="800px"
  >
    <systemBasicUpdateForm
      ref="systemBasicUpdateFormRef"
      :isModal="true"
      @close="close"
    ></systemBasicUpdateForm>
  </el-dialog>
</template>
<script lang="ts">
export default {
  name: "systemBasicTypeList",
};
</script>
<script lang="ts" setup>
import { ref, getCurrentInstance, nextTick } from "vue";
import type { FormInstance } from "element-plus";
import systemBasicUpdateForm from "./update-form.vue";

const props = withDefaults(
  defineProps<{
    detail?: any;
    list?: any;
  }>(),
  {
    detail: {},
    list: [],
  }
);

const { proxy } = getCurrentInstance() as any;

const systemBasicUpdateFormRef = ref<HTMLElement>();

const updateVisible = ref<boolean>(false);

const updateTitle = ref<string>("");

const updateClick = (id: number, title: string) => {
  updateTitle.value = title;
  updateVisible.value = true;
  nextTick(() => {
    proxy?.$refs["systemBasicUpdateFormRef"]?.toInit(id);
  });
};

const close = () => {
    updateTitle.value = '';
    updateVisible.value = false;
};
</script>
